<template>
  <div>
             <!-- 头部 -->
        <header class="header">
            <!-- 头部的第一行 -->
            <div class="top">
                <div class="container">
                    <div class="loginList">
                        <p>尚品汇欢迎您！</p>
                        <!-- 添加判断是否登陆 -->
                        <p v-if="!$store.state.userinfo">
                            <span>请</span>
                            <router-link to="/login">登录</router-link>
                            <a href="###" class="register">免费注册</a>
                        </p>
                        <p v-else @click="rmStatus">{{$store.state.userinfo.user}}</p>
                    </div>
                    <div class="typeList">
                        <a href="###">我的订单</a>
                        <a href="###">我的购物车</a>
                        <a href="###">我的尚品汇</a>
                        <a href="###">尚品汇会员</a>
                        <a href="###">企业采购</a>
                        <a href="###">关注尚品汇</a>
                        <a href="###">合作招商</a>
                        <a href="###">商家后台</a>
                    </div>
                </div>
            </div>
            <!--头部第二行 搜索区域-->
            <div class="bottom">
                <h1 class="logoArea">
                    <a class="logo" title="尚品汇" href="###" target="_blank">
                        <img src="./images/logo.png" alt="">
                    </a>
                </h1>
                <div class="searchArea">
                    <form action="###" class="searchForm">
                        <input type="text" id="autocomplete" class="input-error input-xxlarge" v-model="num" :placeholder="num"/>
                        <button class="sui-btn btn-xlarge btn-danger" type="button" @click="forward">搜索</button>
                    </form>
                </div>
            </div>
        </header>
  </div>
</template>

<script>
export default {
  data(){
    return{
      num:''
    }
  },
  methods:{
      forward(){
          const {query} = this.$route
          this.$router.replace({
              name:'Search',
            //   path:'/search',
              params:{
                  goodskey:this.num
              },
              query
          }
          )
      },
      /* 删除登陆状态 */
      rmStatus(){
          this.$store.commit('rmInfo')
      }
  }

}
</script>

<style lang="less" scoped>
@import './css/index.less';

</style>